<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>工作日志</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 页面内容-->
      <div class="audit-content">
        <div class="centent-title">
          <span>工作日志</span>
        </div>
        <!-- 页面内容 -->
        <div class="centent-inner">
          <!-- 顶部筛选 -->
          <div class="inner-search-box">
            <div class="inner-item">
              <span class="inner-item-title">操作人:</span>
              <el-input v-model="nameValue" placeholder="请输入操作人姓名"></el-input>
            </div>
            <div class="inner-item">
              <span class="inner-item-title">操作时间:</span>
              <el-date-picker v-model="timeValue" type="date" placeholder="选择日期"></el-date-picker>
            </div>
            <button class="btn btn-primary" @click="searchHandle">
              <i class="iconfont icon-search"></i>
              <span>查询</span>
            </button>
            <button class="btn btn-primary" @click="resetHandle">
              <i class="iconfont icon-reset"></i>
              <span>重置</span>
            </button>
            <button class="btn btn-primary">
              <span>查看</span>
            </button>
          </div>
          <!-- 表格 -->
          <div class="inner-table">
            <el-table
              ref="multipleTable"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <!-- <el-table-column type="selection" width="55"></el-table-column> -->

              <el-table-column prop="company" label="机构名称">
                <template slot-scope="scope">
                  <span
                    style="color:#6C8AB6;text-decoration:underline"
                    @click="goInfo(scope.row)"
                  >{{ scope.row.company }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="日志类型"></el-table-column>
              <el-table-column prop="operator" label="操作人" show-overflow-tooltip></el-table-column>
              <el-table-column prop="time" label="操作时间" show-overflow-tooltip></el-table-column>
              <!-- <el-table-column fixed="right" label="日志详情" width="100" height="40">
                <template slot-scope="scope">
                  <el-button class="a" @click="goInfo(scope.row)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>-->
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="inner-pagination">
            <el-pagination background layout="prev, pager, next" :total="dataLength"></el-pagination>
            <span class="pageInfo">当前第{{1}}页/每页10条，共{{dataLength}}条</span>
          </div>

          <!-- 对话框 -->
          <el-dialog title="日志详情" :visible.sync="dialogVisible" center>
            <div class="dialog-inner">
              <div class="inner-item">
                <h5 class="log-name">机构名称:</h5>
                <h5 class="log-info">{{nwoTableData.company}}</h5>
              </div>
              <div class="inner-item">
                <h5 class="log-name">操作人:</h5>
                <h5 class="log-info">{{nwoTableData.operator}}</h5>
              </div>
              <div class="inner-item">
                <h5 class="log-name">操作时间:</h5>
                <h5 class="log-info">{{nwoTableData.time}}</h5>
              </div>
              <!-- <div class="inner-item">
                <h5 class="log-name">操作详情:</h5>
                <h5 class="log-info">{{nwoTableData.company}}</h5>
              </div>-->
              <div class="inner-item">
                <h5 class="log-name">日志类型:</h5>
                <h5 class="log-info">{{nwoTableData.type}}</h5>
              </div>
              <button class="btn btn-primary done-btn" @click="dialogVisible = false">
                <span>完成</span>
              </button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nameValue: "", //姓名
      timeValue: "", //时间
      // 时间控件
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      tableData: [
        {
          company: "百度公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        },
        {
          company: "阿里公司税务缴纳",
          type: "每日日志",
          operator: "小里",
          time: "2018/9/11"
        },
        {
          company: "某某公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        },
        {
          company: "某某公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        },
        {
          company: "某某公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        },
        {
          company: "某某公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        },
        {
          company: "某某公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        },
        {
          company: "某某公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        },
        {
          company: "某某公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        },
        {
          company: "某某公司税务缴纳",
          type: "暂无信息",
          operator: "小王",
          time: "2018/9/8"
        }
      ],
      timeValue: "", //时间选择
      input: "", //input框
      dialogVisible: false, //对话框展示状态
      nwoTableData: {}
    };
  },
  computed: {
    dataLength() {
      return this.tableData.length;
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchHandle() {
      console.log("查询数据");
    },
    resetHandle() {
      this.nameValue = "";
      this.timeValue = "";
    },
    // 查看详情
    goInfo(row) {
      this.dialogVisible = true;
      this.nwoTableData = row;
      console.log(this.nwoTableData);
    }
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .centent-inner {
    padding: 0 20px 20px 20px;
  }
  // 搜索模块
  .inner-search-box {
    width: 100%;
    height: 32px;
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .inner-item {
      height: 32px;
      margin: 0 50px 0 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: flex-start;
      .inner-item-title {
        display: inline-block;
        margin-right: 10px;
        font: 14px/32px "PingFangSC-Regular";
        color: #333333;
      }
      /deep/.el-input {
        width: 216px;
      }
      /deep/.el-input__inner {
        width: 216px;
        height: 32px;
      }
      /deep/.el-input__icon {
        line-height: 32px;
      }
      /deep/.el-select-dropdown__item {
        font: 14px/20px "PingFangSC-Regular";
      }
    }
    .btn {
      margin-right: 20px;
    }
  }
  // 对话框
  .dialog-inner {
    /deep/.el-dialog--center .el-dialog__body {
      padding-top: 0;
    }
    .inner-item {
      font: 14px/34px "PingFangSC-Regular";
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-start;
    }
    .log-name {
      color: #999;
      margin-right: 10px;
    }
    .log-info {
      color: #333;
    }
    .done-btn {
      width: 100%;
      height: 52px;
      margin-top: 20px;
    }
    /deep/.el-dialog--center .el-dialog__body {
      padding: 0 50px 40px;
    }
  }
  // 列表中按钮
  /deep/.el-button--small {
    padding: 0 15px;
  }
  //   对话框
  /deep/.el-dialog {
    width: 40%;
  }
}
</style>